<!DOCTYPE html>
<!-- saved from url=(0049)https://www.cnblogs.com/stephenykk/p/4476704.html -->
<html lang="zh-cn"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS3自适应字体大小(vw vh) - stephenykk - 博客园</title>
<link type="text/css" rel="stylesheet" href="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/blog-common.css">
<link id="MainCss" type="text/css" rel="stylesheet" href="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/bundle-darkgreentrip.css">
<link type="text/css" rel="stylesheet" href="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/142260.css">
<link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet" href="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/bundle-darkgreentrip-mobile.css">
<link title="RSS" type="application/rss+xml" rel="alternate" href="http://www.cnblogs.com/stephenykk/rss">
<link title="RSD" type="application/rsd+xml" rel="EditURI" href="http://www.cnblogs.com/stephenykk/rsd.xml">
<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="http://www.cnblogs.com/stephenykk/wlwmanifest.xml">
<script async="" src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/analytics.js"></script><script type="text/javascript" src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/encoder.js"></script><script src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/jquery.js" type="text/javascript"></script>  
<script type="text/javascript">var currentBlogApp = 'stephenykk', cb_enable_mathjax=false;var isLogined=false;</script>
<script src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/blog-common.js" type="text/javascript"></script>
</head>
<body>
<a name="top"></a>

<!--done-->
<div id="home">
<div id="header">
	<div id="blogTitle">
	<a id="lnkBlogLogo" href="http://www.cnblogs.com/stephenykk/"><img id="blogLogo" src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/logo.gif" alt="返回主页"></a>			
		
<!--done-->
<h1><a id="Header1_HeaderTitle" class="headermaintitle" href="http://www.cnblogs.com/stephenykk/">stephenykk</a></h1>
<h2></h2>



		
	</div><!--end: blogTitle 博客的标题和副标题 -->
	<div id="navigator">
		
<ul id="navList">
<li><a id="blog_nav_sitehome" class="menu" href="http://www.cnblogs.com/">博客园</a></li>
<li><a id="blog_nav_myhome" class="menu" href="http://www.cnblogs.com/stephenykk/">首页</a></li>
<li><a id="blog_nav_newpost" class="menu" rel="nofollow" href="https://i.cnblogs.com/EditPosts.aspx?opt=1">新随笔</a></li>
<li><a id="blog_nav_contact" class="menu" rel="nofollow" href="https://msg.cnblogs.com/send/stephenykk">联系</a></li>
<li><a id="blog_nav_rss" class="menu" href="http://www.cnblogs.com/stephenykk/rss">订阅</a>
<!--<a id="blog_nav_rss_image" class="aHeaderXML" href="http://www.cnblogs.com/stephenykk/rss"><img src="//www.cnblogs.com/images/xml.gif" alt="订阅" /></a>--></li>
<li><a id="blog_nav_admin" class="menu" rel="nofollow" href="https://i.cnblogs.com/">管理</a></li>
</ul>
		<div class="blogStats">
			
			<div id="blog_stats">
<span id="stats_post_count">随笔 - 314&nbsp; </span>
<span id="stats_article_count">文章 - 0&nbsp; </span>
<span id="stats-comment_count">评论 - 3</span>
</div>
			
		</div><!--end: blogStats -->
	</div><!--end: navigator 博客导航栏 -->
</div><!--end: header 头部 -->

<div id="main">
	<div id="mainContent">
	<div class="forFlow">
		
<div id="post_detail">
<!--done-->
<div id="topics">
	<div class="post">
		<h1 class="postTitle">
			<a id="cb_post_title_url" class="postTitle2" href="http://www.cnblogs.com/stephenykk/p/4476704.html">CSS3自适应字体大小(vw vh)</a>
		</h1>
		<div class="clear"></div>
		<div class="postBody">
			<div id="cnblogs_post_body"><h3>viewpoint</h3>
<p>css3提供了一些与当前viewpoint相关的元素，vw，vh，vmin, vmax等。</p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div>
<pre><strong>“viewpoint” = window size</strong>

vw = 1% of viewport width
1vh = 1% of viewport height
1vmin = 1vw or 1vh, 最小
1vmax = 1vw or 1vh, 最大</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div></div>
<p><strong>兼容性：chrome 20+/ safari 6+/ IE 10+ / FF 19+ / IOS 6+</strong></p>
<p><strong>DEMO地址：<a href="http://qianduannotes.sinaapp.com/test/fontResize.html" target="_blank">http://qianduannotes.sinaapp.com/test/fontResize.html</a>&nbsp;&nbsp;</strong>（已经用JS修正重绘bug）</p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div>
<pre>&lt;!DOCTYPE HTML&gt;  
&lt;html&gt;  
&lt;head&gt;  
    &lt;meta charset="UTF-8"&gt;  
    &lt;title&gt;Demo&lt;/title&gt;
    &lt;style type="text/css"&gt;
        #box { font-size: 4vw;}
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="box"&gt;
        我是靖鸣君 我是靖鸣君 我是靖鸣君
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div></div>
<p>但是该方案存在一个bug，上面的代码，当浏览器窗口变化的时候，box中的文字并没有按照应有的比例变化，但是css3标准中是这么说的：</p>
<blockquote>
<p>When the height or width of the viewport is changed, they are scaled accordingly.</p>
</blockquote>
<p>&nbsp;</p>
<h3><a name="t1"></a>插曲</h3>
<p>像这样的问题，我之前也遇到过，比如以下代码：<strong>（小插曲，可跳过）</strong></p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div>
<pre>&lt;!DOCTYPE HTML&gt;  
&lt;html&gt;  
&lt;head&gt;  
    &lt;meta charset="UTF-8"&gt;  
    &lt;title&gt;CSS3 Demo&lt;/title&gt;
    &lt;style type="text/css"&gt;
        body, div { margin:0; padding: 0;}
        .wrap { background: blue; width: 100%;}
        .box { width: 900px; height: 200px;}
    &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div class="wrap"&gt;&lt;div class="box"&gt;&lt;/div&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div></div>
<p>&nbsp;</p>
<p><strong>DEMO地址：<a href="http://qianduannotes.sinaapp.com/test/paintBug.html" target="_blank">http://qianduannotes.sinaapp.com/test/paintBug.html</a></strong></p>
<p>box的宽度设置为900px，wrap设置为100%(~~这个百分比是相对于viewport的)；缩小浏览器窗口，当宽度小于900时会出现滚动条，向右滚动，会发现蓝色部分并不是100%，这个问题大家可以去思考下。</p>
<p>&nbsp;</p>
<h3><a name="t2"></a>bug处理</h3>
<p>回到上面的问题，font-size:4vw，应该会使得字体的大小变化，可是他没有，和标准说的不一样，所以可以认为是一个bug。</p>
<div class="cnblogs_code">
<pre>window.onresize = function(){
    var box = document.getElementById("box");
    box.style["z-index"] = 1; //显式的触发repaint
}</pre>
</div>
<p>&nbsp;z-index可以对应的元素被重绘（repaint）。</p>
<p>&nbsp;</p>
<p>&nbsp;延伸一点点关于重绘（repaint）和回流（reflow）的知识：</p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div>
<p>1. 添加、删除元素(回流+重绘)<br>    2. 隐藏元素，display:none(回流+重绘)，visibility:hidden(只重绘，不回流)<br>    3. 移动元素，比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流)，或者移动元素到另外1个父元素中。(重绘+回流)<br>    4. 对style的操作(对不同的属性操作，影响不一样)<br>    5. 还有一种是用户的操作，比如改变浏览器大小，改变浏览器的字体大小等(回流+重绘)<br>    让我们看看下面的代码是如何影响回流和重绘的:  <br>var s = document.body.style; <br>s.padding = "2px"; // 回流+重绘<br>s.border = "1px solid red"; // 再一次 回流+重绘<br>s.color = "blue"; // 再一次重绘<br>s.backgroundColor = "#ccc"; // 再一次 重绘<br>s.fontSize = "14px"; // 再一次 回流+重绘<br>// 添加node，再一次 回流+重绘<br>关于重绘和回流</p>

<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div></div>
<h3><a name="t3"></a>&nbsp;其他方案</h3>
<p><strong>1. css expression</strong>， 这个效率比较低，不推荐使用</p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div>
<pre>#box { star:expression(onresize = function(){
                var res = parseInt(this.style.width) / 20;
                res = res &lt; 9 : "9px" ? res + "px";
                this.style.fontSize = res;
            });
        }<br><strong>//P.S:上面代码没测试，不知道写错没有</strong></pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div></div>
<p>与其说用的css，还不如说是JS，而且是效率不够的JS。</p>
<p>&nbsp;</p>
<p><strong>2. media query</strong>，这东西也不是特别好用</p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div>
<pre>h2{
  font-size:25px
}

@media screen and (max-width: 850px){/* 可视区域小于 850px, 设置更小font-size属性 */
   h2{
     font-size:19px;
   }
}</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div></div>
<p>用media query会使得字体的变化出现不连贯性，而且要可能设置多个@media，相当麻烦。</p>
<p>&nbsp;</p>
<p><strong>3. media query + -webkit-transition&nbsp;</strong>实现平滑转变</p>
<p><strong>&nbsp;DEMO地址：</strong><a href="http://qianduannotes.sinaapp.com/test/fontResize2.html" target="_blank">http://qianduannotes.sinaapp.com/test/fontResize2.html</a></p>
<div class="cnblogs_code"><div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div>
<pre>div{
    font-size: 40px;
    -webkit-transition:font-size 0.2s ease-out;
}

@media only screen and (max-width: 1200px) { div{ font-size: 39px; }}
@media only screen and (max-width: 1100px) { div{ font-size: 38px; }}
@media only screen and (max-width: 1000px) { div{ font-size: 37px; }}
@media only screen and (max-width: 900px) { div{ font-size: 36px; }}
@media only screen and (max-width: 800px) { div{ font-size: 35px; }}
@media only screen and (max-width: 700px) { div{ font-size: 34px; }}
@media only screen and (max-width: 600px) { div{ font-size: 33px; }}
@media only screen and (max-width: 500px) { div{ font-size: 32px; }}
@media only screen and (max-width: 400px) { div{ font-size: 31px; }}
@media only screen and (max-width: 300px) { div{ font-size: 30px; }}</pre>
<div class="cnblogs_code_toolbar"><span class="cnblogs_code_copy"><a href="javascript:void(0);" onclick="copyCnblogsCode(this)" title="复制代码"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/copycode.gif" alt="复制代码"></a></span></div></div>
<p>&nbsp;</p>
<h3><a name="t4"></a>小结</h3>
<p>这玩意儿其实也没太大作用，用JS处理相当简单，不知道大家还有没有其他比较好的方案，可以提出来交流下~</p>
<p>-----------------------------------------------------------------</p>
<p><strong>4. rem + js</strong></p>
<p>&nbsp;</p>
<p><a href="http://blog.csdn.net/jyy_12/article/details/42557241">css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况</a></p>
<p>&nbsp;</p>
<p><strong>px：</strong>绝对单位，页面按精确像素展示</p>
<p><strong>em：</strong>相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。</p>
<p><strong>rem：</strong>相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。</p>
<p>(另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准，所以网上很多文章提到的将html的font-size设为10方便计算不是那么可取)。</p>
<p>rem在移动端应用可参考淘宝的页面<a href="http://m.taobao.com/" target="_blank">http://m.taobao.com</a>&nbsp;(html的font-size通过动态计算获取)</p>
<p>页面基准320px(20px),html font-size值的计算：</p>
<div class="dp-highlighter bg_javascript">
<div class="bar">
<div class="tools"><strong>[javascript]</strong>&nbsp;<a class="ViewSource" title="view plain" href="http://blog.csdn.net/jyy_12/article/details/42557241">view plain</a><a class="CopyToClipboard" title="copy" href="http://blog.csdn.net/jyy_12/article/details/42557241">copy</a>
<div>&nbsp;</div>
</div>
</div>
<ol class="dp-c" start="1">
<li class="alt"><span class="keyword">var&nbsp;ele=document.getElementsByTagName(<span class="string">"html")[0],&nbsp;&nbsp;</span></span></li>
<li>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;size=document.body.clientWidth/320*20;&nbsp;&nbsp;</li>
<li class="alt">ele.style.fontSize=size+<span class="string">"px"&nbsp;&nbsp;</span></li>
</ol></div>
<p><strong>注：需设置meta缩放比1:1</strong><br>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /&gt;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>
<strong>vw：</strong>viewpoint width，视窗宽度，1vw等于视窗宽度的1%。<br><strong>vh：</strong>viewpoint height，视窗高度，1vh等于视窗高度的1%。<br><strong>vmin：</strong>vw和vh中较小的那个。<br><strong>vmax：</strong>vw和vh中较大的那个。</p>
<p>vw, vh, vmin, vmax：IE9+局部支持，chrome/firefox/safari/opera支持，ios safari 8+支持，android browser4.4+支持，chrome for android39支持</p>
<p>&nbsp;</p>
<p>
其它的单位还有：<br>%:百分比<br>in:寸<br>cm:厘米<br>mm:毫米<br>pt:point，大约1/72寸</p>
<p>pc:pica，大约6pt，1/6寸</p>
<p>&nbsp;</p>
<p>
ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)</p>
<p>ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)</p></div><div id="MySignature"></div>
<div class="clear"></div>
<div id="blog_post_info_block">
<div id="BlogPostCategory">分类: <a href="http://www.cnblogs.com/stephenykk/category/552328.html" target="_blank">HTML5</a></div>
<div id="EntryTag">标签: <a href="http://www.cnblogs.com/stephenykk/tag/rem/">rem</a>, <a href="http://www.cnblogs.com/stephenykk/tag/%E5%93%8D%E5%BA%94%E5%BC%8F%E5%AD%97%E4%BD%93%E5%A4%A7%E5%B0%8F/">响应式字体大小</a></div>
<div id="blog_post_info"><div id="green_channel">
        <a href="javascript:void(0);" id="green_channel_digg" onclick="DiggIt(4476704,cb_blogId,1);green_channel_success(this,&#39;谢谢推荐！&#39;);">好文要顶</a>
            <a id="green_channel_follow" onclick="follow(&#39;df0bd750-fa64-e211-aa8f-842b2b196315&#39;);" href="javascript:void(0);">关注我</a>
    <a id="green_channel_favorite" onclick="AddToWz(cb_entryId);return false;" href="javascript:void(0);">收藏该文</a>
    <a id="green_channel_weibo" href="javascript:void(0);" title="分享至新浪微博" onclick="ShareToTsina()"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/icon_weibo_24.png" alt=""></a>
    <a id="green_channel_wechat" href="javascript:void(0);" title="分享至微信" onclick="shareOnWechat()"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/wechat.png" alt=""></a>
</div>
<div id="author_profile">
    <div id="author_profile_info" class="author_profile_info">
            <a href="http://home.cnblogs.com/u/stephenykk/" target="_blank"><img src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/20130415141915.png" class="author_avatar" alt=""></a>
        <div id="author_profile_detail" class="author_profile_info">
            <a href="http://home.cnblogs.com/u/stephenykk/">stephenykk</a><br>
            <a href="http://home.cnblogs.com/u/stephenykk/followees">关注 - 52</a><br>
            <a href="http://home.cnblogs.com/u/stephenykk/followers">粉丝 - 23</a>
        </div>
    </div>
    <div class="clear"></div>
    <div id="author_profile_honor"></div>
    <div id="author_profile_follow">
                <a href="javascript:void(0);" onclick="follow(&#39;df0bd750-fa64-e211-aa8f-842b2b196315&#39;);return false;">+加关注</a>
    </div>
</div>
<div id="div_digg">
    <div class="diggit" onclick="votePost(4476704,&#39;Digg&#39;)">
        <span class="diggnum" id="digg_count">0</span>
    </div>
    <div class="buryit" onclick="votePost(4476704,&#39;Bury&#39;)">
        <span class="burynum" id="bury_count">0</span>
    </div>
    <div class="clear"></div>
    <div class="diggword" id="digg_tips">
    </div>
</div>
</div>
<div class="clear"></div>
<div id="post_next_prev"><a href="http://www.cnblogs.com/stephenykk/p/4476464.html" class="p_n_p_prefix">« </a> 上一篇：<a href="http://www.cnblogs.com/stephenykk/p/4476464.html" title="发布于2015-05-04 16:14">转: linux文件链接(软链接和硬链接)</a><br><a href="http://www.cnblogs.com/stephenykk/p/4485720.html" class="p_n_p_prefix">» </a> 下一篇：<a href="http://www.cnblogs.com/stephenykk/p/4485720.html" title="发布于2015-05-07 18:21">批处理教程</a><br></div>
</div>


		</div>
		<div class="postDesc">posted @ <span id="post-date">2015-05-04 17:20</span> <a href="http://www.cnblogs.com/stephenykk/">stephenykk</a> 阅读(<span id="post_view_count">1705</span>) 评论(<span id="post_comment_count">0</span>)  <a href="https://i.cnblogs.com/EditPosts.aspx?postid=4476704" rel="nofollow">编辑</a> <a href="https://www.cnblogs.com/stephenykk/p/4476704.html#" onclick="AddToWz(4476704);return false;">收藏</a></div>
	</div>
	<script type="text/javascript">var allowComments=true,cb_blogId=142260,cb_entryId=4476704,cb_blogApp=currentBlogApp,cb_blogUserGuid='df0bd750-fa64-e211-aa8f-842b2b196315',cb_entryCreatedDate='2015/5/4 17:20:00';loadViewCount(cb_entryId);var cb_postType=1;</script>
	
</div><!--end: topics 文章、评论容器-->
</div><a name="!comments"></a><div id="blog-comments-placeholder"></div><script type="text/javascript">var commentManager = new blogCommentManager();commentManager.renderComments(0);</script>
<div id="comment_form" class="commentform">
<a name="commentform"></a>
<div id="divCommentShow"></div>
<div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" onclick="return RefreshCommentList();" id="lnk_RefreshComments" runat="server" clientidmode="Static">刷新评论</a><a href="https://www.cnblogs.com/stephenykk/p/4476704.html#" onclick="return RefreshPage();">刷新页面</a><a href="https://www.cnblogs.com/stephenykk/p/4476704.html#top">返回顶部</a></div>
<div id="comment_form_container"><div class="login_tips">注册用户登录后才能发表评论，请 <a rel="nofollow" href="javascript:void(0);" class="underline" onclick="return login(&#39;commentform&#39;);">登录</a> 或 <a rel="nofollow" href="javascript:void(0);" class="underline" onclick="return register();">注册</a>，<a href="http://www.cnblogs.com/">访问</a>网站首页。</div></div>
<div class="ad_text_commentbox" id="ad_text_under_commentbox"></div>
<div id="ad_t2"><a href="http://www.ucancode.com/index.htm" target="_blank">【推荐】50万行VC++源码: 大型组态工控、电力仿真CAD与GIS源码库</a><br><a href="https://news.cnblogs.com/n/582971/" target="_blank">【新闻】H3 BPM体验平台全面上线</a><br><a href="http://www.hubwiz.com/course/?type=Vue.js&affid=cnblogs" target="_blank">【推荐】Vue.js 2.x 快速入门，大量高效实战示例</a><br><a href="https://cloud.tencent.com/act/campus?fromSource=gwzcw.613398.613398.613398" target="_blank">【活动】腾讯云 学生专属优惠套餐 多规格选择</a><br></div>
<div id="opt_under_post"></div>
<div id="cnblogs_c1" class="c_ad_block"><a href="http://www.grapecity.com.cn/enterprise-solutions/huozige/?utm_source=cnblogs&utm_medium=blogpage&utm_term=bottom&utm_content=huozige&utm_campaign=community" target="_blank"><img width="300" height="250" src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/24442-20171114102259156-1700577248.png" alt="葡萄城1114"></a></div>
<div id="under_post_news"><div class="itnews c_ad_block"><b>最新IT新闻</b>:<br> ·  <a href="http://news.cnblogs.com/n/583071/" target="_blank">中国联通电子发票添加到微信 可领1GB省内流量</a><br> ·  <a href="http://news.cnblogs.com/n/583067/" target="_blank">三星语音助手Bixby中文版发布：Note 8/S8率先适配</a><br> ·  <a href="http://news.cnblogs.com/n/583068/" target="_blank">小蓝、酷骑的败局，并不会让ofo摩拜们高兴起来</a><br> ·  <a href="http://news.cnblogs.com/n/583070/" target="_blank">阿里狂买百货超市背后，是逐渐显露出的自营野心</a><br> ·  <a href="http://news.cnblogs.com/n/583069/" target="_blank">马化腾身家已高达478亿美元 比谷歌创始人还高</a><br>» <a href="http://news.cnblogs.com/" title="IT新闻" target="_blank">更多新闻...</a></div></div>
<div id="cnblogs_c2" class="c_ad_block"><a href="http://click.aliyun.com/m/34771/" target="_blank"><img width="468" height="60" src="./CSS3自适应字体大小(vw vh) - stephenykk - 博客园_files/24442-20171113120112796-634832761.jpg" alt="阿里云1113"></a></div>
<div id="under_post_kb"><div class="itnews c_ad_block" id="kb_block"><b>最新知识库文章</b>:<br><div id="kb_recent"> ·  <a href="http://kb.cnblogs.com/page/112506/" target="_blank">大道至简，职场上做人做事做管理</a><br> ·  <a href="http://kb.cnblogs.com/page/563790/" target="_blank">关于编程，你的练习是不是有效的？</a><br> ·  <a href="http://kb.cnblogs.com/page/581467/" target="_blank">改善程序员生活质量的 3+10 习惯</a><br> ·  <a href="http://kb.cnblogs.com/page/568841/" target="_blank">NASA的10条代码编写原则</a><br> ·  <a href="http://kb.cnblogs.com/page/578502/" target="_blank">为什么你参加了那么多培训，却依然表现平平？</a><br></div>» <a href="http://kb.cnblogs.com/" target="_blank">更多知识库文章...</a></div></div>
<div id="HistoryToday" class="c_ad_block"></div>
<script type="text/javascript">
    fixPostBody();
    setTimeout(function () { incrementViewCount(cb_entryId); }, 50);
    deliverAdT2();
    deliverAdC1();
    deliverAdC2();    
    loadNewsAndKb();
    loadBlogSignature();
    LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid);
    GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate, cb_postType);
    loadOptUnderPost();
    GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate);   
</script>
</div>


	</div><!--end: forFlow -->
	</div><!--end: mainContent 主体内容容器-->

	<div id="sideBar">
		<div id="sideBarMain">
			
<!--done-->
<div class="newsItem">
<h3 class="catListTitle">公告</h3>
	<div id="blog-news"><div id="profile_block">昵称：<a href="http://home.cnblogs.com/u/stephenykk/">stephenykk</a><br>园龄：<a href="http://home.cnblogs.com/u/stephenykk/" title="入园时间：2013-01-23">4年9个月</a><br>粉丝：<a href="http://home.cnblogs.com/u/stephenykk/followers/">23</a><br>关注：<a href="http://home.cnblogs.com/u/stephenykk/followees/">52</a><div id="p_b_follow"><a href="javascript:void(0);" onclick="follow(&#39;df0bd750-fa64-e211-aa8f-842b2b196315&#39;)">+加关注</a></div></div></div><script type="text/javascript">loadBlogNews();</script>
</div>

			<div id="blog-calendar" style=""><table id="blogCalendar" class="Cal" cellspacing="0" cellpadding="0" title="日历">
	<tbody><tr><td colspan="7"><table class="CalTitle" cellspacing="0">
		<tbody><tr><td class="CalNextPrev"><a href="javascript:void(0);" onclick="loadBlogCalendar(&#39;2017/10/01&#39;);return false;">&lt;</a></td><td align="center">2017年11月</td><td class="CalNextPrev" align="right"><a href="javascript:void(0);" onclick="loadBlogCalendar(&#39;2017/12/01&#39;);return false;">&gt;</a></td></tr>
	</tbody></table></td></tr><tr><th class="CalDayHeader" align="center" abbr="日" scope="col">日</th><th class="CalDayHeader" align="center" abbr="一" scope="col">一</th><th class="CalDayHeader" align="center" abbr="二" scope="col">二</th><th class="CalDayHeader" align="center" abbr="三" scope="col">三</th><th class="CalDayHeader" align="center" abbr="四" scope="col">四</th><th class="CalDayHeader" align="center" abbr="五" scope="col">五</th><th class="CalDayHeader" align="center" abbr="六" scope="col">六</th></tr><tr><td class="CalOtherMonthDay" align="center">29</td><td class="CalOtherMonthDay" align="center">30</td><td class="CalOtherMonthDay" align="center">31</td><td align="center">1</td><td align="center">2</td><td align="center">3</td><td class="CalWeekendDay" align="center">4</td></tr><tr><td class="CalWeekendDay" align="center">5</td><td align="center">6</td><td align="center">7</td><td align="center">8</td><td align="center">9</td><td align="center">10</td><td class="CalWeekendDay" align="center">11</td></tr><tr><td class="CalWeekendDay" align="center">12</td><td align="center">13</td><td align="center">14</td><td align="center">15</td><td align="center">16</td><td align="center">17</td><td class="CalWeekendDay" align="center">18</td></tr><tr><td class="CalWeekendDay" align="center">19</td><td align="center">20</td><td class="CalTodayDay" align="center">21</td><td align="center">22</td><td align="center">23</td><td align="center">24</td><td class="CalWeekendDay" align="center">25</td></tr><tr><td class="CalWeekendDay" align="center">26</td><td align="center">27</td><td align="center">28</td><td align="center">29</td><td align="center">30</td><td class="CalOtherMonthDay" align="center">1</td><td class="CalOtherMonthDay" align="center">2</td></tr><tr><td class="CalOtherMonthDay" align="center">3</td><td class="CalOtherMonthDay" align="center">4</td><td class="CalOtherMonthDay" align="center">5</td><td class="CalOtherMonthDay" align="center">6</td><td class="CalOtherMonthDay" align="center">7</td><td class="CalOtherMonthDay" align="center">8</td><td class="CalOtherMonthDay" align="center">9</td></tr>
</tbody></table></div><script type="text/javascript">loadBlogDefaultCalendar();</script>
			
			<div id="leftcontentcontainer">
				<div id="blog-sidecolumn"><div id="sidebar_search" class="sidebar-block">
<div id="sidebar_search" class="mySearch">
<h3 class="catListTitle">搜索</h3>
<div id="sidebar_search_box">
<div id="widget_my_zzk" class="div_my_zzk"><input type="text" id="q" onkeydown="return zzk_go_enter(event);" class="input_my_zzk">&nbsp;<input onclick="zzk_go()" type="button" value="找找看" id="btnZzk" class="btn_my_zzk"></div>
<div id="widget_my_google" class="div_my_zzk"><input type="text" name="google_q" id="google_q" onkeydown="return google_go_enter(event)" class="input_my_zzk">&nbsp;<input onclick="google_go()" type="button" value="谷歌搜索" class="btn_my_zzk"></div>
</div>
</div>

</div><div id="sidebar_shortcut" class="sidebar-block">
<div class="catListLink">
<h3 class="catListTitle">常用链接</h3>
<ul>
<li><a href="http://www.cnblogs.com/stephenykk/p/" title="我的博客的随笔列表">我的随笔</a></li><li><a href="http://www.cnblogs.com/stephenykk/MyComments.html" title="我发表过的评论列表">我的评论</a></li><li><a href="http://www.cnblogs.com/stephenykk/OtherPosts.html" title="我评论过的随笔列表">我的参与</a></li><li><a href="http://www.cnblogs.com/stephenykk/RecentComments.html" title="我的博客的评论列表">最新评论</a></li><li><a href="http://www.cnblogs.com/stephenykk/tag/" title="我的博客的标签列表">我的标签</a></li>
</ul>
<div id="itemListLin_con" style="display:none;">
<ul>

</ul>
</div>
</div></div><div id="sidebar_toptags" class="sidebar-block">
<div class="catListTag">
<h3 class="catListTitle">我的标签</h3>
<ul>
<li><a href="http://www.cnblogs.com/stephenykk/tag/angularjs/">angularjs</a>(10)</li><li><a href="http://www.cnblogs.com/stephenykk/tag/seajs/">seajs</a>(10)</li><li><a href="http://www.cnblogs.com/stephenykk/tag/requirejs/">requirejs</a>(7)</li><li><a href="http://www.cnblogs.com/stephenykk/tag/Apache/">Apache</a>(7)</li><li><a href="http://www.cnblogs.com/stephenykk/tag/nodejs/">nodejs</a>(6)</li><li><a href="http://www.cnblogs.com/stephenykk/tag/git/">git</a>(5)</li><li><a href="http://www.cnblogs.com/stephenykk/tag/grunt/">grunt</a>(4)</li><li><a href="http://www.cnblogs.com/stephenykk/tag/promise/">promise</a>(4)</li><li><a href="http://www.cnblogs.com/stephenykk/tag/sql/">sql</a>(4)</li><li><a href="http://www.cnblogs.com/stephenykk/tag/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/">正则表达式</a>(4)</li><li><a href="http://www.cnblogs.com/stephenykk/tag/">更多</a></li>
</ul>
</div></div><div id="sidebar_categories">
<div id="sidebar_postcategory" class="catListPostCategory sidebar-block">
<h3 class="catListTitle">随笔分类</h3>

<ul>

<li><a id="CatList_LinkList_0_Link_0" href="http://www.cnblogs.com/stephenykk/category/826705.html">Angular(12)</a> </li>

<li><a id="CatList_LinkList_0_Link_1" href="http://www.cnblogs.com/stephenykk/category/530716.html">Apache(8)</a> </li>

<li><a id="CatList_LinkList_0_Link_2" href="http://www.cnblogs.com/stephenykk/category/453968.html">CSS3&amp;Animate(13)</a> </li>

<li><a id="CatList_LinkList_0_Link_3" href="http://www.cnblogs.com/stephenykk/category/992408.html">Docs</a> </li>

<li><a id="CatList_LinkList_0_Link_4" href="http://www.cnblogs.com/stephenykk/category/826707.html">ES(4)</a> </li>

<li><a id="CatList_LinkList_0_Link_5" href="http://www.cnblogs.com/stephenykk/category/826708.html">Git&amp;SVN(4)</a> </li>

<li><a id="CatList_LinkList_0_Link_6" href="http://www.cnblogs.com/stephenykk/category/453967.html">H4C2(55)</a> </li>

<li><a id="CatList_LinkList_0_Link_7" href="http://www.cnblogs.com/stephenykk/category/552328.html">HTML5(21)</a> </li>

<li><a id="CatList_LinkList_0_Link_8" href="http://www.cnblogs.com/stephenykk/category/453971.html">jQuery(14)</a> </li>

<li><a id="CatList_LinkList_0_Link_9" href="http://www.cnblogs.com/stephenykk/category/453966.html">JS(109)</a> </li>

<li><a id="CatList_LinkList_0_Link_10" href="http://www.cnblogs.com/stephenykk/category/466929.html">life(1)</a> </li>

<li><a id="CatList_LinkList_0_Link_11" href="http://www.cnblogs.com/stephenykk/category/552330.html">NodeJs(22)</a> </li>

<li><a id="CatList_LinkList_0_Link_12" href="http://www.cnblogs.com/stephenykk/category/466931.html">OS(5)</a> </li>

<li><a id="CatList_LinkList_0_Link_13" href="http://www.cnblogs.com/stephenykk/category/453974.html">others(15)</a> </li>

<li><a id="CatList_LinkList_0_Link_14" href="http://www.cnblogs.com/stephenykk/category/530719.html">PHP(5)</a> </li>

<li><a id="CatList_LinkList_0_Link_15" href="http://www.cnblogs.com/stephenykk/category/826706.html">React</a> </li>

<li><a id="CatList_LinkList_0_Link_16" href="http://www.cnblogs.com/stephenykk/category/821111.html">Sea&amp;Require(17)</a> </li>

<li><a id="CatList_LinkList_0_Link_17" href="http://www.cnblogs.com/stephenykk/category/466930.html">SQL(8)</a> </li>

<li><a id="CatList_LinkList_0_Link_18" href="http://www.cnblogs.com/stephenykk/category/482312.html">XML(3)</a> </li>

</ul>

</div>

<div id="sidebar_postarchive" class="catListPostArchive sidebar-block">
<h3 class="catListTitle">随笔档案</h3>

<ul>

<li><a id="CatList_LinkList_1_Link_0" href="http://www.cnblogs.com/stephenykk/archive/2017/09.html">2017年9月 (2)</a> </li>

<li><a id="CatList_LinkList_1_Link_1" href="http://www.cnblogs.com/stephenykk/archive/2017/07.html">2017年7月 (2)</a> </li>

<li><a id="CatList_LinkList_1_Link_2" href="http://www.cnblogs.com/stephenykk/archive/2017/01.html">2017年1月 (1)</a> </li>

<li><a id="CatList_LinkList_1_Link_3" href="http://www.cnblogs.com/stephenykk/archive/2016/12.html">2016年12月 (1)</a> </li>

<li><a id="CatList_LinkList_1_Link_4" href="http://www.cnblogs.com/stephenykk/archive/2016/11.html">2016年11月 (6)</a> </li>

<li><a id="CatList_LinkList_1_Link_5" href="http://www.cnblogs.com/stephenykk/archive/2016/10.html">2016年10月 (7)</a> </li>

<li><a id="CatList_LinkList_1_Link_6" href="http://www.cnblogs.com/stephenykk/archive/2016/08.html">2016年8月 (6)</a> </li>

<li><a id="CatList_LinkList_1_Link_7" href="http://www.cnblogs.com/stephenykk/archive/2016/06.html">2016年6月 (2)</a> </li>

<li><a id="CatList_LinkList_1_Link_8" href="http://www.cnblogs.com/stephenykk/archive/2016/05.html">2016年5月 (3)</a> </li>

<li><a id="CatList_LinkList_1_Link_9" href="http://www.cnblogs.com/stephenykk/archive/2016/04.html">2016年4月 (24)</a> </li>

<li><a id="CatList_LinkList_1_Link_10" href="http://www.cnblogs.com/stephenykk/archive/2016/03.html">2016年3月 (1)</a> </li>

<li><a id="CatList_LinkList_1_Link_11" href="http://www.cnblogs.com/stephenykk/archive/2016/01.html">2016年1月 (10)</a> </li>

<li><a id="CatList_LinkList_1_Link_12" href="http://www.cnblogs.com/stephenykk/archive/2015/12.html">2015年12月 (3)</a> </li>

<li><a id="CatList_LinkList_1_Link_13" href="http://www.cnblogs.com/stephenykk/archive/2015/11.html">2015年11月 (1)</a> </li>

<li><a id="CatList_LinkList_1_Link_14" href="http://www.cnblogs.com/stephenykk/archive/2015/10.html">2015年10月 (1)</a> </li>

<li><a id="CatList_LinkList_1_Link_15" href="http://www.cnblogs.com/stephenykk/archive/2015/09.html">2015年9月 (1)</a> </li>

<li><a id="CatList_LinkList_1_Link_16" href="http://www.cnblogs.com/stephenykk/archive/2015/07.html">2015年7月 (1)</a> </li>

<li><a id="CatList_LinkList_1_Link_17" href="http://www.cnblogs.com/stephenykk/archive/2015/06.html">2015年6月 (3)</a> </li>

<li><a id="CatList_LinkList_1_Link_18" href="http://www.cnblogs.com/stephenykk/archive/2015/05.html">2015年5月 (7)</a> </li>

<li><a id="CatList_LinkList_1_Link_19" href="http://www.cnblogs.com/stephenykk/archive/2014/12.html">2014年12月 (11)</a> </li>

<li><a id="CatList_LinkList_1_Link_20" href="http://www.cnblogs.com/stephenykk/archive/2014/11.html">2014年11月 (7)</a> </li>

<li><a id="CatList_LinkList_1_Link_21" href="http://www.cnblogs.com/stephenykk/archive/2014/10.html">2014年10月 (6)</a> </li>

<li><a id="CatList_LinkList_1_Link_22" href="http://www.cnblogs.com/stephenykk/archive/2014/09.html">2014年9月 (4)</a> </li>

<li><a id="CatList_LinkList_1_Link_23" href="http://www.cnblogs.com/stephenykk/archive/2014/08.html">2014年8月 (6)</a> </li>

<li><a id="CatList_LinkList_1_Link_24" href="http://www.cnblogs.com/stephenykk/archive/2014/07.html">2014年7月 (10)</a> </li>

<li><a id="CatList_LinkList_1_Link_25" href="http://www.cnblogs.com/stephenykk/archive/2014/06.html">2014年6月 (10)</a> </li>

<li><a id="CatList_LinkList_1_Link_26" href="http://www.cnblogs.com/stephenykk/archive/2014/05.html">2014年5月 (5)</a> </li>

<li><a id="CatList_LinkList_1_Link_27" href="http://www.cnblogs.com/stephenykk/archive/2014/04.html">2014年4月 (28)</a> </li>

<li><a id="CatList_LinkList_1_Link_28" href="http://www.cnblogs.com/stephenykk/archive/2014/03.html">2014年3月 (12)</a> </li>

<li><a id="CatList_LinkList_1_Link_29" href="http://www.cnblogs.com/stephenykk/archive/2014/02.html">2014年2月 (13)</a> </li>

<li><a id="CatList_LinkList_1_Link_30" href="http://www.cnblogs.com/stephenykk/archive/2014/01.html">2014年1月 (10)</a> </li>

<li><a id="CatList_LinkList_1_Link_31" href="http://www.cnblogs.com/stephenykk/archive/2013/12.html">2013年12月 (8)</a> </li>

<li><a id="CatList_LinkList_1_Link_32" href="http://www.cnblogs.com/stephenykk/archive/2013/11.html">2013年11月 (8)</a> </li>

<li><a id="CatList_LinkList_1_Link_33" href="http://www.cnblogs.com/stephenykk/archive/2013/10.html">2013年10月 (6)</a> </li>

<li><a id="CatList_LinkList_1_Link_34" href="http://www.cnblogs.com/stephenykk/archive/2013/09.html">2013年9月 (10)</a> </li>

<li><a id="CatList_LinkList_1_Link_35" href="http://www.cnblogs.com/stephenykk/archive/2013/08.html">2013年8月 (4)</a> </li>

<li><a id="CatList_LinkList_1_Link_36" href="http://www.cnblogs.com/stephenykk/archive/2013/07.html">2013年7月 (21)</a> </li>

<li><a id="CatList_LinkList_1_Link_37" href="http://www.cnblogs.com/stephenykk/archive/2013/06.html">2013年6月 (16)</a> </li>

<li><a id="CatList_LinkList_1_Link_38" href="http://www.cnblogs.com/stephenykk/archive/2013/05.html">2013年5月 (17)</a> </li>

<li><a id="CatList_LinkList_1_Link_39" href="http://www.cnblogs.com/stephenykk/archive/2013/04.html">2013年4月 (15)</a> </li>

<li><a id="CatList_LinkList_1_Link_40" href="http://www.cnblogs.com/stephenykk/archive/2013/03.html">2013年3月 (1)</a> </li>

<li><a id="CatList_LinkList_1_Link_41" href="http://www.cnblogs.com/stephenykk/archive/2013/02.html">2013年2月 (4)</a> </li>

</ul>

</div>

<div id="sidebar_imagecategory" class="catListImageCategory sidebar-block">
<h3 class="catListTitle">相册</h3>

<ul>

<li><a id="CatList_LinkList_2_Link_0" href="http://www.cnblogs.com/stephenykk/gallery/566531.html" rel="nofollow">web(1)</a> </li>

</ul>

</div>

</div><div id="sidebar_recentcomments" class="sidebar-block"><div id="recent_comments_wrap">
<div class="catListComment">
<h3 class="catListTitle">最新评论</h3>

	<div id="RecentCommentsBlock"><ul>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/stephenykk/p/4861420.html#3751907">1. Re:转: JS自定义事件的定义和触发(createEvent, dispatchEvent)</a></li>
        <li class="recent_comment_body">创建自定义事件也可以用这个是吗<br>var alertEvent = new Event('alert');</li>
        <li class="recent_comment_author">--大桔子001</li>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/stephenykk/p/6017927.html#3736650">2. Re:ejs简单教程</a></li>
        <li class="recent_comment_body">很好的总结</li>
        <li class="recent_comment_author">--小_牛仔</li>
        <li class="recent_comment_title"><a href="http://www.cnblogs.com/stephenykk/p/4539200.html#3731879">3. Re:jasmine官方api参考</a></li>
        <li class="recent_comment_body">uploader.filters.push({ name: '延迟1秒', fn: function(item, options, deferred) { console.l......</li>
        <li class="recent_comment_author">--snoobcn</li>
</ul>
</div>
</div>
</div></div><div id="sidebar_topviewedposts" class="sidebar-block"><div id="topview_posts_wrap">
<div class="catListView">
<h3 class="catListTitle">阅读排行榜</h3>
	<div id="TopViewPostsBlock"><ul><li><a href="http://www.cnblogs.com/stephenykk/p/4861420.html">1. 转: JS自定义事件的定义和触发(createEvent, dispatchEvent)(15243)</a></li><li><a href="http://www.cnblogs.com/stephenykk/p/3558887.html">2. createObjectURL方法 实现本地图片预览(12977)</a></li><li><a href="http://www.cnblogs.com/stephenykk/p/4584528.html">3. 转: mysql create view 创建视图(12549)</a></li><li><a href="http://www.cnblogs.com/stephenykk/p/5505997.html">4. mock.js 使用教程(8666)</a></li><li><a href="http://www.cnblogs.com/stephenykk/p/3624192.html">5. zepto API参考(~~比较全面)(7536)</a></li></ul></div>
</div>
</div></div><div id="sidebar_topcommentedposts" class="sidebar-block"><div id="topfeedback_posts_wrap">
<div class="catListFeedback">
<h3 class="catListTitle">评论排行榜</h3>
	<div id="TopFeedbackPostsBlock"><ul><li><a href="http://www.cnblogs.com/stephenykk/p/6017927.html">1. ejs简单教程(1)</a></li><li><a href="http://www.cnblogs.com/stephenykk/p/4861420.html">2. 转: JS自定义事件的定义和触发(createEvent, dispatchEvent)(1)</a></li><li><a href="http://www.cnblogs.com/stephenykk/p/4539200.html">3. jasmine官方api参考(1)</a></li></ul></div>
</div>
</div></div><div id="sidebar_topdiggedposts" class="sidebar-block"><div id="topdigg_posts_wrap">
<div class="catListView">
<h3 class="catListTitle">推荐排行榜</h3>
<div id="TopDiggPostsBlock"><ul><li><a href="http://www.cnblogs.com/stephenykk/archive/2013/05/30/3108462.html">1. Javascript用new Date()从毫秒数获取对应的日期时间(1)</a></li><li><a href="http://www.cnblogs.com/stephenykk/p/5133795.html">2. 看日记学git摘要~灰常用心的教程(1)</a></li><li><a href="http://www.cnblogs.com/stephenykk/p/4861420.html">3. 转: JS自定义事件的定义和触发(createEvent, dispatchEvent)(1)</a></li><li><a href="http://www.cnblogs.com/stephenykk/p/4584528.html">4. 转: mysql create view 创建视图(1)</a></li><li><a href="http://www.cnblogs.com/stephenykk/p/4182763.html">5. 转:angular的decorator方法(1)</a></li></ul></div>
</div></div></div></div><script type="text/javascript">loadBlogSideColumn();</script>
			</div>
			
		</div><!--end: sideBarMain -->
	</div><!--end: sideBar 侧边栏容器 -->
	<div class="clear"></div>
	</div><!--end: main -->
	<div class="clear"></div>
	<div id="footer">
		
<!--done-->
Copyright ©2017 stephenykk
	</div><!--end: footer -->
</div><!--end: home 自定义的最大容器 -->


</body></html>